package io.gitee.jingtuo.android.device.ui.widget

import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import io.gitee.jingtuo.android.device.R

@Composable
fun PropView(pair: Pair<String, String>, modifier: Modifier) {
    ConstraintLayout(
        modifier = modifier
    ) {
        val (keyLabelId, keyId, valueLabelId, valueId, lineId) = createRefs()
        val keyBottomBarrier = createBottomBarrier(keyLabelId, keyId, margin = 5.dp)
        val valueBottomBarrier = createBottomBarrier(valueLabelId, valueId, margin = 10.dp)
        val labelEndBarrier = createEndBarrier(keyLabelId, valueLabelId, margin = 10.dp)
        Text(
            text = stringResource(R.string.key_colon),
            modifier = Modifier.constrainAs(keyLabelId) {
                top.linkTo(parent.top, 10.dp)
                start.linkTo(parent.start, 16.dp)
            }
        )
        Text(
            text = pair.first,
            textAlign = TextAlign.Start,
            modifier = Modifier.constrainAs(keyId) {
                top.linkTo(keyLabelId.top)
                start.linkTo(labelEndBarrier)
                end.linkTo(parent.end, 16.dp)
                width = Dimension.preferredValue(0.dp)
            }
        )
        Text(
            text = stringResource(R.string.value_colon),
            modifier = Modifier.constrainAs(valueLabelId) {
                top.linkTo(keyBottomBarrier)
                start.linkTo(parent.start, 16.dp)
            }
        )
        Text(
            text = pair.second,
            textAlign = TextAlign.Start,
            modifier = Modifier.constrainAs(valueId) {
                top.linkTo(valueLabelId.top)
                start.linkTo(labelEndBarrier)
                end.linkTo(parent.end, 16.dp)
                width = Dimension.preferredValue(0.dp)
            }
        )
        HorizontalDivider(
            modifier = Modifier.constrainAs(lineId) {
                top.linkTo(valueBottomBarrier)
            }
        )
    }
}